<template>
    <view class="box-card">
        <view class="box-card-tab">
            <view class="box-card-tab-1" :class="activeIndex==0?'box-card-tab-1-active':''" @click="tabChange(0)">开票中
            </view>
            <view class="box-card-tab-1" :class="activeIndex==1?'box-card-tab-1-active':''" @click="tabChange(1)">已完成
            </view>
        </view>
        <view class="box-card-list">
            <view class="box-card-list-1" v-for="(item,index) in invoice_list" :key="index">
                <view class="box-card-list-info">
                    <view class="name">{{item.inv_title}}</view>
                    <view class="status" :class="activeIndex==1?'status2':''">{{activeIndex==0?'开票中':'已完成'}}</view>
                </view>
                <view class="type">增值税电子普通发票</view>
                <view class="money">¥{{item.order_amount}}</view>
            </view>
            <o-empty bg="#f5f5f5" v-if="invoice_list.length==0"></o-empty>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: 0,
                page: 1,
                hasNext:true,
                invoice_list:[]
            }
        },
        onShow(){
            this.get_invoice_list();
        },
        onReachBottom() {
        	if (this.hasNext) {
        	    this.page++;
        	    this.get_invoice_list();
        	}
        },
        methods: {
            tabChange(index){
                this.activeIndex=index;
                this.get_invoice_list();
            },
            get_invoice_list(){
                let that = this;
                this.$util.request({
                    url: '/mobile/index.php?act=member_invoice&op=order_inv_list',
                    method: 'get',
                    data: {
                        curpage:that.page,
                        status:that.activeIndex+1,
                    },
                }).then(function(res) {
                    that.hasNext=res.datas.paged.hasmore;
                    if(that.page==1){
                        that.invoice_list=res.datas.list;
                    }else{
                        that.invoice_list=that.invoice_list.concat(res.datas.list);
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box-card {
		// background-color: white;
		// height: 100vh;
        .box-card-tab {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #FFF;
            padding: 24rpx 175rpx;

            .box-card-tab-1 {
                font-size: 28rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            .box-card-tab-1-active {
                font-size: 28rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #E96A1D;
                position: relative;
            }

            .box-card-tab-1-active::after {
                position: absolute;
                bottom: -4rpx;
                left: 30%;
                right: 30%;
                height: 2rpx;
                content: '';
                background: #E96A1D;
                border-radius: 6rpx;
            }
        }

        .box-card-list {
            background-color: #FFF;
            margin: 30rpx;

            .box-card-list-1 {
                padding: 30rpx;

                .box-card-list-info {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .name {
                        font-size: 32rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }

                    .status {
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #E96A1D;
                    }
                    .status2 {
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #323232;
                    }
                }

                .type {
                    font-size: 26rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #909090;
                }

                .money {
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #E96A1D;
                    text-align: right;
                    margin-top: 20rpx;
                }
            }
        }
    }
</style>